<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--<button>按钮1</button>-->
<!--<button>按钮2</button>-->
<!--<button>按钮3</button>-->
<!--<button>按钮4</button>-->
<!--<button>按钮5</button>-->
<ul>
    <li>333</li>
    <li>333</li>
    <li>333</li>
    <li>333</li>
    <li>333</li>
    <li>333</li>
</ul>

<script>

    //let const  声明变量和常量    var


    //01---作用域只局限于当前代码块
    //    {
    //        var str = '张三';
    //        console.log(str);
    //        let str2 = '李四';
    //        console.log(str2)
    //    }
    //    console.log("=======" + str)
    //    console.log("=======" + str2)   //  报错、


    //02---使用let申明的变量作用域不会被提升
    //    {
    //        console.log(str3)
    //        var str3 = '张三';
    //
    //        console.log(str4)
    //        let str4 = '李四';
    //    }


    //03---在相同的作用域下不能申明相同的变量

    //04---for循环体现let的父子作用域

    //  01 ====const只在当前的代码块中有效
    //  02 ====使用let申明的变量作用域不会被提升
    //  03 ====不能重复声明
    //  04   ====声明的常量必须赋值
    //    let btns = document.querySelectorAll('button');
    //    for (let i = 0; i < btns.length; i++) {  //两个作用域
    //        btns[i].onclick = function () {
    //            alert('点击了第' + i + '个按钮')
    //        }
    //    }
    //
    //    for (let i = 0; i < 5; i++) {
    //        let i = 30;
    //        console.log(i);
    //    }


    //    let [name,sex,age] = ['zhangsan','nv',23]
    //    console.log(name);
    //    console.log(sex);
    //    console.log(age);


    //    let {name,ages,friends,pet} = {name:'zhangsan',ages:34,sex:'nv',friends:['lulu','dodo'],pet:{name:'fangfang',age:4}}
    //    console.log(name)
    //    console.log(ages)
    //    console.log(friends)
    //    console.log(pet)

    //    let {name: str} = {name: 'zhangsan'};
    //    console.log(name);
    //    console.log(str);


    //    //    let [name,sex,age] = ['zhangsan','nv',23]
    //    let [arr1,[arr2,arr3,[arr4,arr5]]]=[1, [2, 3, [4, 5]]];
    //    console.log(arr1, arr2, arr3, arr4, arr5)
    //
    //    let [a,,c] = [1, 2, 3]
    //    console.log(a) ;
    //    console.log(c);
    //    let [a,b,c,d,e]=12345;
    //    console.log(a);
    //    console.log(b);
    //    console.log(c);
    //    console.log(d);
    //    console.log(e);


    //==========   set   ========== As array
    // 创建一个集合 ,没有重复值，开发中用于去重，key = value,
    //    let set = new Set(['zhangsan', 'lisi', 'zhangsan', 'lisi']);
    //    console.log(set);

    //属性
    //    console.log(set.size)

    //四个方法  1、add  2、delete 3、has 4、clear
    //    set.add('liudehua').add('gutianle');
    //    console.log(set.has('zhangsan'));
    //    console.log(set);
    //    console.log(set.keys());
    //    console.log(set.values());


    // ======   map  ===========
    //    1、特点 类似对象
    //    let obj1 = {a: 1}, obj2 = {b: 2}, obj = {}
    //    obj.name='zhangsan';  //字符串类型
    //    obj.age= 12;  //字符串类型
    //    obj[obj1] = 'tian'   //对象类型
    //    obj[obj2] = 'dahai'
    //    console.log(obj);
    //    console.log(obj1.toString());
    //    console.log(obj2.toString());
    //    console.log(obj1.toString() == obj2.toString());


    //    创建一个map   size,,不允许重复  方法：set(key,value) get(key),delete()
    //    let obj1 = {a: 1}, obj2 = {b: 2}, obj = {}
    //    const map = new Map([
    //        ['name', 'zhangsan'],
    //        ['age', 23],
    //        ['sex', '男'],
    //        [obj1, '今天天气很好'],
    //        [obj2, '不适合上班'],
    //        [[1, 2], 'hahahah'],
    //        ['name1', 'lisi'],
    //        ['age', 23],
    //    ]);
    //    console.log(map);
    //    console.log(map.size);

    //    map.set('friend',['zhaoliu','liqi']).set(['dog'],'xiaoshu').set('obj3',{'hahah':'jadsoijdoa'})
    //    console.log(map);
    //    map.delete(obj1)
    //    console.log(map);
    //    console.log(map.keys());
    //    console.log(map.values());
    //    console.log(map.entries());


    //遍历
    //    map.forEach(function (value, index) {
    //        console.log(index + ':' + value);
    //    })

    //    //注意事项
    //    map.set({},'heheheh')
    //    map.set({},'hahahah')
    //    console.log(map);
    //    console.log({} == {});


    //    =============  Symbol  ========== symbol 的数据类型，表示独一无二的值

    //    对象的属性名可以是 字符串类型和symbol类型

    //    定义
//        let str1 = Symbol();
//        let str2 = Symbol();
//        console.log(( str1 == str2));
//        console.log(typeof str1);
//        console.log(typeof str2);

//    //    描述
//        let str3 = Symbol('name')
//        let str4 = Symbol('name')
//        console.log(str3);
//        console.log(str4);
//        console.log(str3 === str4);

    //    对象的属性名
//        const obj = {};
//        obj.name = 'zhangsan';
//        obj.name = 'lisi';
//        obj[Symbol('name')] = 'zhangdan'
//        obj[Symbol('name')] = 'lisi'
//        console.log(obj);


    //    =============  class  ========== 语法糖 构造函数的另一种写法

    //    构造函数
    //    function Person(name, age) {
    //        this.name = name;
    //        this.age = age;
    //    }
    //
    //    Person.prototype = {
    //        constructor: Person,
    //        print(){
    //            console.log('我叫' + this.name + ', 今年' + this.age + '岁')
    //        }
    //    };

    //    let person = new Person('zhangsan', 23);
    //    console.log(person);

    //    通过class面向对象
    <!--class Person {-->
    <!--constructor(name, age) {-->
    <!--this.name = name;-->
    <!--this.age = age;-->
    <!--}-->

    <!--print() {-->
    <!--console.log('我叫' + this.name + ', 今年' + this.age + '岁')-->
    <!--}-->
    <!--}-->

    <!--let person = new Person('zhangsan', 23);-->
    <!--console.log(person);-->
    <!--person.print()-->






    //模板字符串  ` ${str}`

    //数组的扩展  Array.from(other)  Array.of()将其他集合转为数组

        let allList = document.querySelectorAll('li')
        console.log(allList);
        console.log(Array.isArray(allList));
        console.log(Array.from(allList));

        console.log(Array.of(1, 2, 3, 4, 5));

    //    对象的扩展   如果key和value一样的，只要写一个就够了
    //    let name = 'zhangsan';
    //    let age = 23;
    //    let person = {
    //        'name': name,    //name
    //        'age': age          //age
    //    }


    //obj.assign()
    //    let obj1 = {name: 'zhangsan'};
    //    let obj2 = {age: 12};
    //    let obj3 = {sex: 'nan'};
    //    let obj4 = {pet: 'dog'};
    //    let obj = {};
    //    Object.assign(obj, obj1, obj2, obj3, obj4);
    //    console.log(obj);

    //    延展操作符

    //    let str = '今天真热啊啊啊啊';
    //    let strArr = [...str]
    //    console.log(strArr);

    //    let student = {
    //        name: 'zhangsan',
    //        age: 233,
    //        sex:'nv'
    //    }

    //    let myArr = [1, 2, 3, 'zhangsan', 20, 3, 4, 1, 2]
    //    let set = new Set(myArr)
    //    let aa = [...set]
    //    console.log(aa);


    //    形参设置默认值
    //    function sum(n1, n2) {
    //        n1 = n1 || 10;  //容错
    //        n2 = n2 || 2;
    //        console.log(n1 + n2);
    //    }
    //    sum(1, 2)
    //    sum()

    //    function sum(n1 = 10, n2 = 2) {
    //        console.log(n1 + n2);
    //    }
    //
    //    sum()


    //    参数形式  延展操作符
    //    function sum() {
    //        let result = 0
    //        for (let value of arguments) {
    //            result += value
    //        }
    //        return result
    //    }
    //
    //    console.log(sum(1, 2, 3, 4));

    //    function sum(name, ...nums) {
    //        let result = 0
    //        console.log(name);
    //        for (let value of nums) {
    //            result += value
    //        }
    //        return result
    //    }
    //
    //    console.log(sum('张三', 1, 2, 3, 4, 5));


    //    箭头函数
    //    let sum = (n1, n2)=> {
    //        return n1 + n2;
    //    }
    //
    //    console.log(sum(100, 200));

    //    let arr = ['zhangsan', 'lisi', 'wangwu']
    //    console.log(arr);
    //    arr.forEach((value, index) => {
    //        console.log(value + ":" + index)
    //    })

    function demo() {
        setTimeout(function () {
            console.log(this);
        }, 1000)

        setTimeout(() => {
            console.log(this);
        }, 1000)
    }

    let obj = {};
    demo.call(obj)


</script>


</body>
</html>